<!DOCTYPE html>

<html class="app-ui">

    <head>
        <!-- Meta -->
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />

        <!-- Document title -->
        <title>Pages &ndash; Inbox | AppUI</title>

        <meta name="description" content="AppUI - Admin Dashboard Template & UI Framework" />
        <meta name="author" content="rustheme" />
        <meta name="robots" content="noindex, nofollow" />

        <!-- Favicons -->
        <link rel="apple-touch-icon" href="assets/img/favicons/apple-touch-icon.png" />
        <link rel="icon" href="assets/img/favicons/favicon.ico" />

        <!-- Google fonts -->
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,400italic,500,900%7CRoboto+Slab:300,400%7CRoboto+Mono:400" />

        <!-- AppUI CSS stylesheets -->
        <link rel="stylesheet" id="css-font-awesome" href="assets/css/font-awesome.css" />
        <link rel="stylesheet" id="css-ionicons" href="assets/css/ionicons.css" />
        <link rel="stylesheet" id="css-bootstrap" href="assets/css/bootstrap.css" />
        <link rel="stylesheet" id="css-app" href="assets/css/app.css" />
        <link rel="stylesheet" id="css-app-custom" href="assets/css/app-custom.css" />
        <!-- End Stylesheets -->
    </head>

    <body class="app-ui layout-has-drawer layout-has-fixed-header">
        <div class="app-layout-canvas">
            <div class="app-layout-container">

                <!-- Drawer -->
                <aside class="app-layout-drawer">

                    <!-- Drawer scroll area -->
                    <div class="app-layout-drawer-scroll">
                        <!-- Drawer logo -->
                        <div id="logo" class="drawer-header">
                            <a href="index.html"><img class="img-responsive" src="assets/img/logo/logo-backend.png" title="AppUI" alt="AppUI" /></a>
                        </div>

                        <!-- Drawer navigation -->
                        <nav class="drawer-main">
                            <ul class="nav nav-drawer">

                                <li class="nav-item nav-drawer-header">Apps</li>

                                <li class="nav-item">
                                    <a href="index.html"><i class="ion-ios-speedometer-outline"></i> Dashboard</a>
                                </li>

                                <li class="nav-item">
                                    <a href="frontend_home.html"><i class="ion-ios-monitor-outline"></i> Frontend</a>
                                </li>

                                <li class="nav-item nav-drawer-header">Components</li>

                                <li class="nav-item nav-item-has-subnav">
                                    <a href="javascript:void(0)"><i class="ion-ios-calculator-outline"></i> UI Elements</a>
                                    <ul class="nav nav-subnav">

                                        <li>
                                            <a href="base_ui_buttons.html">Buttons</a>
                                        </li>

                                        <li>
                                            <a href="base_ui_cards.html">Cards</a>
                                        </li>

                                        <li>
                                            <a href="base_ui_cards_api.html">Cards API</a>
                                        </li>

                                        <li>
                                            <a href="base_ui_layout.html">Layout</a>
                                        </li>

                                        <li>
                                            <a href="base_ui_grid.html">Grid</a>
                                        </li>

                                        <li>
                                            <a href="base_ui_icons.html">Icons</a>
                                        </li>

                                        <li>
                                            <a href="base_ui_modals_tooltips.html">Modals / Tooltips</a>
                                        </li>

                                        <li>
                                            <a href="base_ui_alerts_notify.html">Alerts / Notify</a>
                                        </li>

                                        <li>
                                            <a href="base_ui_pagination.html">Pagination</a>
                                        </li>

                                        <li>
                                            <a href="base_ui_progress.html">Progress</a>
                                        </li>

                                        <li>
                                            <a href="base_ui_tabs.html">Tabs</a>
                                        </li>

                                        <li>
                                            <a href="base_ui_typography.html">Typography</a>
                                        </li>

                                        <li>
                                            <a href="base_ui_widgets.html">Widgets</a>
                                        </li>

                                    </ul>
                                </li>

                                <li class="nav-item nav-item-has-subnav">
                                    <a href="javascript:void(0)"><i class="ion-ios-compose-outline"></i> Forms</a>
                                    <ul class="nav nav-subnav">

                                        <li>
                                            <a href="base_forms_elements.html">Elements</a>
                                        </li>

                                        <li>
                                            <a href="base_forms_samples.html">Samples</a>
                                        </li>

                                        <li>
                                            <a href="base_forms_pickers_select.html">Pickers &amp; Select</a>
                                        </li>

                                        <li>
                                            <a href="base_forms_validation.html">Validation</a>
                                        </li>

                                        <li>
                                            <a href="base_forms_wizard.html">Wizard</a>
                                        </li>

                                    </ul>
                                </li>

                                <li class="nav-item nav-item-has-subnav">
                                    <a href="javascript:void(0)"><i class="ion-ios-list-outline"></i> Tables</a>
                                    <ul class="nav nav-subnav">

                                        <li>
                                            <a href="base_tables_styles.html">Styles</a>
                                        </li>

                                        <li>
                                            <a href="base_tables_responsive.html">Responsive</a>
                                        </li>

                                        <li>
                                            <a href="base_tables_tools.html">Tools</a>
                                        </li>

                                        <li>
                                            <a href="base_tables_pricing.html">Pricing</a>
                                        </li>

                                        <li>
                                            <a href="base_tables_datatables.html">Wizard</a>
                                        </li>

                                    </ul>
                                </li>

                                <li class="nav-item nav-item-has-subnav active open">
                                    <a href="javascript:void(0)"><i class="ion-ios-browsers-outline"></i> Pages</a>
                                    <ul class="nav nav-subnav">

                                        <li>
                                            <a href="base_pages_blank.html">Blank</a>
                                        </li>

                                        <li class="active">
                                            <a href="base_pages_inbox.html">Inbox</a>
                                        </li>

                                        <li>
                                            <a href="base_pages_invoice.html">Invoice</a>
                                        </li>

                                        <li>
                                            <a href="base_pages_profile.html">Profile</a>
                                        </li>

                                        <li>
                                            <a href="base_pages_search.html">Search</a>
                                        </li>

                                    </ul>
                                </li>

                                <li class="nav-item nav-item-has-subnav">
                                    <a href="javascript:void(0)"><i class="ion-social-javascript-outline"></i> JS plugins</a>
                                    <ul class="nav nav-subnav">

                                        <li>
                                            <a href="base_js_maps.html">Maps</a>
                                        </li>

                                        <li>
                                            <a href="base_js_sliders.html">Sliders</a>
                                        </li>

                                        <li>
                                            <a href="base_js_charts_flot.html">Charts - Flot</a>
                                        </li>

                                        <li>
                                            <a href="base_js_charts_chartjs.html">Charts - Chart.js</a>
                                        </li>

                                        <li>
                                            <a href="base_js_charts_sparkline.html">Charts - Sparkline</a>
                                        </li>

                                        <li>
                                            <a href="base_js_draggable.html">Draggable</a>
                                        </li>

                                        <li>
                                            <a href="base_js_syntax_highlight.html">Syntax highlight</a>
                                        </li>

                                    </ul>
                                </li>

                            </ul>
                        </nav>
                        <!-- End drawer navigation -->

                        <div class="drawer-footer">
                            <p class="copyright">AppUI Template &copy;</p>
                            <a href="https://shapebootstrap.net/item/1525731-appui-admin-frontend-template/?ref=rustheme" target="_blank" rel="nofollow">Purchase a license</a>
                        </div>
                    </div>
                    <!-- End drawer scroll area -->
                </aside>
                <!-- End drawer -->

                <!-- Header -->
                <header class="app-layout-header">
                    <nav class="navbar navbar-default">
                        <div class="container-fluid">
                            <div class="navbar-header">
                                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#header-navbar-collapse" aria-expanded="false">
					<span class="sr-only">Toggle navigation</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
                                <button class="pull-left hidden-lg hidden-md navbar-toggle" type="button" data-toggle="layout" data-action="sidebar_toggle">
					<span class="sr-only">Toggle drawer</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
                                <span class="navbar-page-title">
					
					Pages &ndash; Inbox
				</span>
                            </div>

                            <div class="collapse navbar-collapse" id="header-navbar-collapse">
                                <!-- Header search form -->
                                <form class="navbar-form navbar-left app-search-form" role="search">
                                    <div class="form-group">
                                        <div class="input-group">
                                            <input class="form-control" type="search" id="search-input" placeholder="Search..." />
                                            <span class="input-group-btn">
								<button class="btn" type="button"><i class="ion-ios-search-strong"></i></button>
							</span>
                                        </div>
                                    </div>
                                </form>

                                <ul id="main-menu" class="nav navbar-nav navbar-left">
                                    <li class="dropdown">
                                        <a href="#" data-toggle="dropdown">English <span class="caret"></span></a>

                                        <ul class="dropdown-menu">
                                            <li><a href="javascript:void(0)">French</a></li>
                                            <li><a href="javascript:void(0)">German</a></li>
                                            <li><a href="javascript:void(0)">Italian</a></li>
                                        </ul>
                                    </li>
                                    <li class="dropdown">
                                        <a href="#" data-toggle="dropdown">Pages <span class="caret"></span></a>

                                        <ul class="dropdown-menu">
                                            <li><a href="javascript:void(0)">Analytics</a></li>
                                            <li><a href="javascript:void(0)">Visits</a></li>
                                            <li><a href="javascript:void(0)">Changelog</a></li>
                                        </ul>
                                    </li>
                                </ul>
                                <!-- .navbar-left -->

                                <ul class="nav navbar-nav navbar-right navbar-toolbar hidden-sm hidden-xs">
                                    <li>
                                        <!-- Opens the modal found at the bottom of the page -->
                                        <a href="javascript:void(0)" data-toggle="modal" data-target="#apps-modal"><i class="ion-grid"></i></a>
                                    </li>

                                    <li class="dropdown">
                                        <a href="javascript:void(0)" data-toggle="dropdown"><i class="ion-ios-bell"></i> <span class="badge">3</span></a>
                                        <ul class="dropdown-menu dropdown-menu-right">
                                            <li class="dropdown-header">Profile</li>
                                            <li>
                                                <a tabindex="-1" href="javascript:void(0)"><span class="badge pull-right">3</span> News </a>
                                            </li>
                                            <li>
                                                <a tabindex="-1" href="javascript:void(0)"><span class="badge pull-right">1</span> Messages </a>
                                            </li>
                                            <li class="divider"></li>
                                            <li class="dropdown-header">More</li>
                                            <li>
                                                <a tabindex="-1" href="javascript:void(0)">Edit Profile..</a>
                                            </li>
                                        </ul>
                                    </li>

                                    <li class="dropdown dropdown-profile">
                                        <a href="javascript:void(0)" data-toggle="dropdown">
                                            <span class="m-r-sm">John Doe <span class="caret"></span></span>
                                            <img class="img-avatar img-avatar-48" src="assets/img/avatars/avatar3.jpg" alt="User profile pic" />
                                        </a>
                                        <ul class="dropdown-menu dropdown-menu-right">
                                            <li class="dropdown-header">
                                                Pages
                                            </li>
                                            <li>
                                                <a href="base_pages_profile.html">Profile</a>
                                            </li>
                                            <li>
                                                <a href="base_pages_profile.html"><span class="badge badge-success pull-right">3</span> Blog</a>
                                            </li>
                                            <li>
                                                <a href="frontend_login_signup.html">Logout</a>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                                <!-- .navbar-right -->
                            </div>
                        </div>
                        <!-- .container-fluid -->
                    </nav>
                    <!-- .navbar-default -->
                </header>
                <!-- End header -->

                <main class="app-layout-content">

                    <!-- Page Content -->
                    <div class="container-fluid p-y-md">
                        <div class="row">
                            <div class="col-sm-5 col-lg-3">
                                <!-- Collapsible Inbox Navigation (using Bootstrap collapse functionality) -->
                                <button class="btn btn-app btn-block visible-xs m-b" data-toggle="collapse" data-target="#inbox-nav" type="button">Navigation</button>
                                <div class="collapse navbar-collapse p-x-0" id="inbox-nav">
                                    <!-- Inbox Menu -->
                                    <div class="card">
                                        <div class="card-header">
                                            <h4>Menu</h4>
                                        </div>
                                        <div class="card-block">
                                            <ul class="nav nav-pills nav-stacked">
                                                <li class="active">
                                                    <a href="base_pages_inbox.html">
									Inbox <span class="badge pull-right">4</span>
								</a>
                                                </li>
                                                <li>
                                                    <a href="javascript:void(0)">
									Starred <span class="badge pull-right">8</span>
								</a>
                                                </li>
                                                <li>
                                                    <a href="javascript:void(0)">
									Sent <span class="badge pull-right">38</span>
								</a>
                                                </li>
                                                <li>
                                                    <a href="javascript:void(0)">
									Draft <span class="badge pull-right">1</span>
								</a>
                                                </li>
                                                <li>
                                                    <a href="javascript:void(0)">
									Archive <span class="badge pull-right">27</span>
								</a>
                                                </li>
                                                <li>
                                                    <a href="javascript:void(0)">
									Trash <span class="badge pull-right">4</span>
								</a>
                                                </li>
                                            </ul>
                                        </div>
                                        <!-- .card-block -->
                                    </div>
                                    <!-- .card -->
                                    <!-- End Inbox Menu -->

                                    <!-- Friends -->
                                    <div class="card">
                                        <div class="card-header">
                                            <h4>Friends</h4>
                                            <ul class="card-actions">
                                                <li>
                                                    <button type="button"><i class="ion-more"></i></button>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="card-block">
                                            <ul class="list-users">
                                                <li>
                                                    <a href="base_pages_profile.html">
                                                        <img class="img-avatar" src="assets/img/avatars/avatar7.jpg" alt="">
                                                        <i class="ion-record text-green"></i> Jacqueline Scott
                                                        <div class="text-muted"><small>Web Designer</small></div>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="base_pages_profile.html">
                                                        <img class="img-avatar" src="assets/img/avatars/avatar12.jpg" alt="">
                                                        <i class="ion-record text-green"></i> Douglas Bowman
                                                        <div class="text-muted"><small>Graphic Designer</small></div>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="base_pages_profile.html">
                                                        <img class="img-avatar" src="assets/img/avatars/avatar5.jpg" alt="">
                                                        <i class="ion-record hidden"></i> Mildred Matthews
                                                        <div class="text-muted"><small>Photographer</small></div>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="base_pages_profile.html">
                                                        <img class="img-avatar" src="assets/img/avatars/avatar2.jpg" alt="">
                                                        <i class="ion-record text-green"></i> Brian Hunt
                                                        <div class="text-muted"><small>Copywriter</small></div>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="base_pages_profile.html">
                                                        <img class="img-avatar" src="assets/img/avatars/avatar9.jpg" alt="">
                                                        <i class="ion-record hidden"></i> Christine Harper
                                                        <div class="text-muted"><small>UI Designer</small></div>
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>
                                        <!-- .card-block -->
                                    </div>
                                    <!-- End Friends // .card -->

                                    <!-- Account -->
                                    <div class="card">
                                        <div class="card-block text-center bg-img" style="background-image: url('assets/img/photos/photo2.jpg');">
                                            <img class="img-avatar img-avatar-96 img-avatar-thumb" src="assets/img/avatars/avatar3.jpg" alt="" />
                                        </div>
                                        <a class="card-block" href="javascript:void(0)">
                                            <table class="card-table text-center">
                                                <tbody>
                                                    <tr class="row">
                                                        <td class="col-xs-6 b-r">
                                                            <div class="m-y-md">
                                                                <i class="ion-ios-cloud-upload-outline fa-3x"></i>
                                                            </div>
                                                        </td>
                                                        <td class="col-xs-6">
                                                            <p class="h3">+ 5GB</p>
                                                            <div class="small text-muted">Upgrade Now</div>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </a>
                                    </div>
                                    <!-- .card -->
                                    <!-- End Account -->
                                </div>
                                <!-- End Collapsible Inbox Navigation -->
                            </div>
                            <!-- .col-sm-5 -->

                            <div class="col-sm-7 col-lg-9">
                                <!-- Message List -->
                                <div class="card">
                                    <div class="card-header">
                                        <div class="h4">Inbox</div>
                                        <ul class="card-actions">
                                            <li>
                                                <button class="js-tooltip" title="Previous 15 Messages" type="button" data-toggle="card-action"><i class="ion-ios-arrow-left"></i></button>
                                            </li>
                                            <li>
                                                <button class="js-tooltip" title="Next 15 Messages" type="button" data-toggle="card-action"><i class="ion-ios-arrow-right"></i></button>
                                            </li>
                                            <li>
                                                <button type="button" data-toggle="card-action" data-action="refresh_toggle" data-action-mode="demo"><i class="ion-refresh"></i></button>
                                            </li>
                                            <li>
                                                <button type="button" data-toggle="card-action" data-action="fullscreen_toggle"></button>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="card-block">
                                        <!-- Messages Options -->
                                        <div>
                                            <button class="btn btn-default pull-right" type="button"><i class="ion-close"></i> <span class="m-l-xs hidden-xs">Delete</span></button>
                                            <p class="btn-group">
                                                <button class="btn btn-default" type="button"><i class="ion-archive"></i> <span class="m-l-xs hidden-xs">Archive</span></button>
                                                <button class="btn btn-default" type="button"><i class="ion-star"></i> <span class="m-l-xs hidden-xs">Star</span></button>
                                            </p>
                                        </div>
                                        <!-- End Messages Options -->

                                        <!-- Messages & Checkable Table (.js-table-checkable class is initialized in App() -> uiHelperTableToolsCheckable()) -->
                                        <div class="pull-r-l">
                                            <table class="js-table-checkable table table-hover table-vcenter m-b-0">
                                                <tbody>
                                                    <tr>
                                                        <td class="text-center">
                                                            <label class="css-input css-checkbox css-checkbox-default">
											<input type="checkbox"><span></span>
										</label>
                                                        </td>
                                                        <td class="hidden-xs font-500">Terry Carter</td>
                                                        <td>
                                                            <a class="font-500" data-toggle="modal" data-target="#modal-message" href="#">Explore the Wonderful World of Spam</a>
                                                            <div class="text-muted">You xxx-day free trial has started now and..</div>
                                                        </td>
                                                        <td class="visible-lg text-muted"></td>
                                                        <td class="visible-lg text-muted">
                                                            <em>3 days ago</em>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td class="text-center w-10">
                                                            <label class="css-input css-checkbox css-checkbox-default">
											<input type="checkbox"><span></span>
										</label>
                                                        </td>
                                                        <td class="hidden-xs font-500 w-20">Diana Day</td>
                                                        <td>
                                                            <a class="font-500" data-toggle="modal" data-target="#modal-message" href="#">Special Offer: 30% off subscriptions</a>
                                                            <div class="text-muted">It's a pleasure to have you on our service..</div>
                                                        </td>
                                                        <td class="visible-lg text-muted" style="width: 80px;">
                                                            <i class="ion-paperclip"></i> (3)
                                                        </td>
                                                        <td class="visible-lg text-muted w-15">
                                                            <em>2 min ago</em>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td class="text-center">
                                                            <label class="css-input css-checkbox css-checkbox-default">
											<input type="checkbox"><span></span>
										</label>
                                                        </td>
                                                        <td class="hidden-xs font-500">Deborah Cox</td>
                                                        <td>
                                                            <a class="font-500" data-toggle="modal" data-target="#modal-message" href="#">Apply to the Ambassador program for...</a>
                                                            <div class="text-muted">We are glad you decided to go with a vip..</div>
                                                        </td>
                                                        <td class="visible-lg text-muted">
                                                            <i class="ion-paperclip"></i> (2)
                                                        </td>
                                                        <td class="visible-lg text-muted">
                                                            <em>10 min ago</em>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td class="text-center">
                                                            <label class="css-input css-checkbox css-checkbox-default">
											<input type="checkbox"><span></span>
										</label>
                                                        </td>
                                                        <td class="hidden-xs font-500">Joan Morris</td>
                                                        <td>
                                                            <a class="font-500" data-toggle="modal" data-target="#modal-message" href="#">Inspiration Inside: Welcome to the C...</a>
                                                            <div class="text-muted">An update is under way for your app..</div>
                                                        </td>
                                                        <td class="visible-lg text-muted"></td>
                                                        <td class="visible-lg text-muted">
                                                            <em>25 min ago</em>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td class="text-center">
                                                            <label class="css-input css-checkbox css-checkbox-default">
											<input type="checkbox"><span></span>
										</label>
                                                        </td>
                                                        <td class="hidden-xs font-500">Betty Torres</td>
                                                        <td>
                                                            <a class="font-500" data-toggle="modal" data-target="#modal-message" href="#">Invoice for transaction 1796151</a>
                                                            <div class="text-muted">You had a new sale and earned..</div>
                                                        </td>
                                                        <td class="visible-lg text-muted">
                                                            <i class="ion-paperclip"></i> (1)
                                                        </td>
                                                        <td class="visible-lg text-muted">
                                                            <em>30 min ago</em>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td class="text-center">
                                                            <label class="css-input css-checkbox css-checkbox-default">
											<input type="checkbox"><span></span>
										</label>
                                                        </td>
                                                        <td class="hidden-xs font-500">Olivia Shaw</td>
                                                        <td>
                                                            <a class="font-500" data-toggle="modal" data-target="#modal-message" href="#">Invoice for transaction 1796150</a>
                                                            <div class="text-muted">Your account is inactive for a long time and..</div>
                                                        </td>
                                                        <td class="visible-lg text-muted"></td>
                                                        <td class="visible-lg text-muted">
                                                            <em>1 hour ago</em>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td class="text-center">
                                                            <label class="css-input css-checkbox css-checkbox-default">
											<input type="checkbox"><span></span>
										</label>
                                                        </td>
                                                        <td class="hidden-xs font-500">Diana Day</td>
                                                        <td>
                                                            <a class="font-500" data-toggle="modal" data-target="#modal-message" href="#">You've got a reply from Maria</a>
                                                            <div class="text-muted">This is a notification about our new product..</div>
                                                        </td>
                                                        <td class="visible-lg text-muted">
                                                            <i class="ion-paperclip"></i> (1)
                                                        </td>
                                                        <td class="visible-lg text-muted">
                                                            <em>1 day ago</em>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td class="text-center">
                                                            <label class="css-input css-checkbox css-checkbox-default">
											<input type="checkbox"><span></span>
										</label>
                                                        </td>
                                                        <td class="hidden-xs font-500">Denise Bowman</td>
                                                        <td>
                                                            <a class="font-500" data-toggle="modal" data-target="#modal-message" href="#">Inspiration Inside: Welcome to the C...</a>
                                                            <div class="text-muted">Our Book is out! You can buy a copy and..</div>
                                                        </td>
                                                        <td class="visible-lg text-muted">
                                                            <i class="ion-paperclip"></i> (9)
                                                        </td>
                                                        <td class="visible-lg text-muted">
                                                            <em>1 day ago</em>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td class="text-center">
                                                            <label class="css-input css-checkbox css-checkbox-default">
											<input type="checkbox"><span></span>
										</label>
                                                        </td>
                                                        <td class="hidden-xs font-500">Judy Campbell</td>
                                                        <td>
                                                            <a class="font-500" data-toggle="modal" data-target="#modal-message" href="#">Tim has just replied to your review</a>
                                                            <div class="text-muted">The monthly report you requested for..</div>
                                                        </td>
                                                        <td class="visible-lg text-muted">
                                                            <i class="ion-paperclip"></i> (6)
                                                        </td>
                                                        <td class="visible-lg text-muted">
                                                            <em>3 days ago</em>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td class="text-center">
                                                            <label class="css-input css-checkbox css-checkbox-default">
											<input type="checkbox"><span></span>
										</label>
                                                        </td>
                                                        <td class="hidden-xs font-500">Diana Day</td>
                                                        <td>
                                                            <a class="font-500" data-toggle="modal" data-target="#modal-message" href="#">Welcome to Spam World!</a>
                                                            <div class="text-muted">This is the invoice for the project we..</div>
                                                        </td>
                                                        <td class="visible-lg text-muted"></td>
                                                        <td class="visible-lg text-muted">
                                                            <em>5 days ago</em>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td class="text-center">
                                                            <label class="css-input css-checkbox css-checkbox-default">
											<input type="checkbox"><span></span>
										</label>
                                                        </td>
                                                        <td class="hidden-xs font-500">Douglas Bowman</td>
                                                        <td>
                                                            <a class="font-500" data-toggle="modal" data-target="#modal-message" href="#">[PaperShop] Purchase Confirmation</a>
                                                            <div class="text-muted">You have a new friend request. Click the..</div>
                                                        </td>
                                                        <td class="visible-lg text-muted">
                                                            <i class="ion-paperclip"></i> (5)
                                                        </td>
                                                        <td class="visible-lg text-muted">
                                                            <em>1 week ago</em>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td class="text-center">
                                                            <label class="css-input css-checkbox css-checkbox-default">
											<input type="checkbox"><span></span>
										</label>
                                                        </td>
                                                        <td class="hidden-xs font-500">Deborah Roberts</td>
                                                        <td>
                                                            <a class="font-500" data-toggle="modal" data-target="#modal-message" href="#">Enjoy life!</a>
                                                            <div class="text-muted">Thank you for helping us with our cause...</div>
                                                        </td>
                                                        <td class="visible-lg text-muted">
                                                            <i class="ion-paperclip"></i> (3)
                                                        </td>
                                                        <td class="visible-lg text-muted">
                                                            <em>1 week ago</em>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td class="text-center">
                                                            <label class="css-input css-checkbox css-checkbox-default">
											<input type="checkbox"><span></span>
										</label>
                                                        </td>
                                                        <td class="hidden-xs font-500">Juan Martinez</td>
                                                        <td>
                                                            <a class="font-500" data-toggle="modal" data-target="#modal-message" href="#">New Twitter follower!</a>
                                                            <div class="text-muted">You have a new follower, congratulations..</div>
                                                        </td>
                                                        <td class="visible-lg text-muted">
                                                            <i class="ion-paperclip"></i> (1)
                                                        </td>
                                                        <td class="visible-lg text-muted">
                                                            <em>2 weeks ago</em>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td class="text-center">
                                                            <label class="css-input css-checkbox css-checkbox-default">
											<input type="checkbox"><span></span>
										</label>
                                                        </td>
                                                        <td class="hidden-xs font-500">Melissa McCoy</td>
                                                        <td>
                                                            <a class="font-500" data-toggle="modal" data-target="#modal-message" href="#">Huge Discount available!</a>
                                                            <div class="text-muted">Due to the fact that you are a great..</div>
                                                        </td>
                                                        <td class="visible-lg text-muted"></td>
                                                        <td class="visible-lg text-muted">
                                                            <em>3 weeks ago</em>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                        <!-- End Messages -->
                                    </div>
                                    <!-- .card-block -->
                                </div>
                                <!-- .card -->
                                <!-- End Message List -->
                            </div>
                            <!-- .col-sm-7 -->
                        </div>
                        <!-- .row -->
                    </div>
                    <!-- .container-fluid -->
                    <!-- End Page Content -->

                    <!-- Modal -->
                    <div class="modal" id="modal-message" tabindex="-1" role="dialog" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="card m-b-0">
                                    <div class="card-header bg-green bg-inverse">
                                        <h4>This is a modal message</h4>
                                        <ul class="card-actions">
                                            <li>
                                                <button data-dismiss="modal" type="button"><i class="ion-close"></i></button>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="card-block">
                                        <p>Dolor posuere proin blandit accumsan senectus netus nullam curae, ornare laoreet adipiscing luctus mauris adipiscing pretium eget fermentum, tristique lobortis est ut metus lobortis tortor tincidunt himenaeos habitant
                                            quis dictumst proin odio sagittis purus mi, nec taciti vestibulum quis in sit varius lorem sit metus mi.</p>
                                        <p>Dolor posuere proin blandit accumsan senectus netus nullam curae, ornare laoreet adipiscing luctus mauris adipiscing pretium eget fermentum, tristique lobortis est ut metus lobortis tortor tincidunt himenaeos habitant
                                            quis dictumst proin odio sagittis purus mi, nec taciti vestibulum quis in sit varius lorem sit metus mi.</p>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button class="btn btn-sm btn-default" type="button" data-dismiss="modal">Close</button>
                                    <button class="btn btn-sm btn-app" type="button" data-dismiss="modal"><i class="ion-checkmark"></i> Ok</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- End Modal Message -->

                </main>

            </div>
            <!-- .app-layout-container -->
        </div>
        <!-- .app-layout-canvas -->

        <!-- Apps Modal -->
        <!-- Opens from the button in the header -->
        <div id="apps-modal" class="modal fade" tabindex="-1" role="dialog">
            <div class="modal-sm modal-dialog modal-dialog-top">
                <div class="modal-content">
                    <!-- Apps card -->
                    <div class="card m-b-0">
                        <div class="card-header bg-app bg-inverse">
                            <h4>Apps</h4>
                            <ul class="card-actions">
                                <li>
                                    <button data-dismiss="modal" type="button"><i class="ion-close"></i></button>
                                </li>
                            </ul>
                        </div>
                        <div class="card-block">
                            <div class="row text-center">
                                <div class="col-xs-6">
                                    <a class="card card-block m-b-0 bg-app-secondary bg-inverse" href="index.html">
                                        <i class="ion-speedometer fa-4x"></i>
                                        <p>Admin</p>
                                    </a>
                                </div>
                                <div class="col-xs-6">
                                    <a class="card card-block m-b-0 bg-app-tertiary bg-inverse" href="frontend_home.html">
                                        <i class="ion-laptop fa-4x"></i>
                                        <p>Frontend</p>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <!-- .card-block -->
                    </div>
                    <!-- End Apps card -->
                </div>
            </div>
        </div>
        <!-- End Apps Modal -->

        <div class="app-ui-mask-modal"></div>

        <!-- AppUI Core JS: jQuery, Bootstrap, slimScroll, scrollLock and App.js -->
        <script src="assets/js/core/jquery.min.js"></script>
        <script src="assets/js/core/bootstrap.min.js"></script>
        <script src="assets/js/core/jquery.slimscroll.min.js"></script>
        <script src="assets/js/core/jquery.scrollLock.min.js"></script>
        <script src="assets/js/core/jquery.placeholder.min.js"></script>
        <script src="assets/js/app.js"></script>
        <script src="assets/js/app-custom.js"></script>

        <!-- Page JS Code -->
        <script>
            $(function()
            {
                // Init page helpers (Table Tools helper + Easy Pie Chart plugin)
                App.initHelpers('table-tools');
            });
        </script>

    </body>

</html>